<script lang="ts" setup>
const appStore = useAppStore()
const { isLogin, currentGlobalCurrency } = storeToRefs(appStore)
const { isZeroShowOther } = useVipInfo()

const vipPrizeConfig = ref<{
  [t: string]: string | number
  level: number
  dailyGift: string
  weeklyGift: string
  monthlyGift: string
}[]>([])
const currencyName = ref(isLogin.value ? currentGlobalCurrency.value : languageConfig[getCurrentLanguageForFrontend()].currency)
// 接口返回的币种
const memberCurrency = ref(currencyName.value)

const { runAsync: runAsyncVipPrizeConfig, loading: isLoading } = useRequest(ApiMemberVipPrizeConfig, {
  onSuccess(data) {
    if (data) {
      const _data = Object.values(data.data ?? []).sort((a, b) => a[0].level - b[0].level)
      memberCurrency.value = getCurrencyConfigByCode(_data[0][0].currency_id).name
      const _vipPrizeConfig = []
      for (const key in _data) {
        const amountArr = _data[key].map((item) => {
          return item.amount
        })
        _vipPrizeConfig.push({
          level: _vipPrizeConfig.length,
          dailyGift: amountArr[1],
          weeklyGift: amountArr[2],
          monthlyGift: amountArr[3],
        })
      }
      vipPrizeConfig.value = _vipPrizeConfig
    }
  },
})

const columnConfig: { [t: string]: Column } = {
  VIP: {
    title: `${$t('grade', { vip: 'VIP' })}`,
    dataIndex: 'level',
    align: 'center',
    slot: 'level',
  },
  DAY: {
    title: $t('vip_Cumulative_bonus_day_salary_bonus'),
    dataIndex: 'dailyGift',
    align: 'center',
    slot: 'daily_gift',
  },
  WEEK: {
    title: $t('vip_Cumulative_bonus_week_salary_bonus'),
    dataIndex: 'weeklyGift',
    align: 'center',
    slot: 'weekly_gift',
  },
  MONTH: {
    title: $t('vip_Cumulative_bonus_month_salary_bonus'),
    dataIndex: 'monthlyGift',
    align: 'center',
    slot: 'monthly_gift',
  },
}
const getBonusConfig = computed(() => {
  return vipPrizeConfig.value.filter(item => item.level !== 0)
})
const getShowColumn = computed(() => {
  const arr: Column[] = []
  for (const key in columnConfig) {
    const item = columnConfig[key]
    if (key === 'VIP') {
      arr.push(item)
      continue
    }
    if (!isArrKeyZero(item.dataIndex))
      arr.push(item)
  }
  return arr.length === 1 ? [] : arr // 如果只有vip等级，则全部不展示
})
// 判断展示哪种货币，防止钱包选择的货币，后端不支持
const activeCurrency = computed(() => {
  return (currencyName.value === memberCurrency.value) ? currencyName.value : memberCurrency.value
})

/** 判断数组某个字段是否都有值 */
function isArrKeyZero(key: string) {
  return getBonusConfig.value.every(item => isZeroShowOther(item[key].toString()))
}

watch(() => currentGlobalCurrency.value, (newVal) => {
  runAsyncVipPrizeConfig({
    cur: currencyConfig[newVal].cur,
  }).then(() => {
    currencyName.value = newVal
  })
})

runAsyncVipPrizeConfig({ cur: currencyConfig[currencyName.value].cur })
</script>

<template>
  <div class="vip-day-salary">
    <BaseTable
      :columns="getShowColumn" :data-source="getShowColumn.length ? getBonusConfig : []"
      :show-out-load="isLoading"
      :loading="isLoading"
      :skeleton-width="50"
      style="color: #B3BEC1; font-size: 0.75rem;"
      class="rounded-sm"
    >
      <template #level="{ record }">
        <div class="center">
          <BaseImage width="1.5rem" :is-network="true" :url="`/images/vip/${record.level}_bc.webp`" />
          <span class="text-xs text-white font-semibold ml-1">{{ `VIP${record.level}` }}</span>
        </div>
      </template>
      <template #daily_gift="{ record: { dailyGift } }">
        <div v-if="isZeroShowOther(dailyGift)">
          -
        </div>
        <div v-else class="center">
          <AppAmount :amount="dailyGift" :currency-type="activeCurrency" />
        </div>
      </template>
      <template #weekly_gift="{ record: { weeklyGift } }">
        <div v-if="isZeroShowOther(weeklyGift)">
          -
        </div>
        <div v-else class="center">
          <AppAmount :amount="weeklyGift" :currency-type="activeCurrency" />
        </div>
      </template>
      <template #monthly_gift="{ record: { monthlyGift } }">
        <div v-if="isZeroShowOther(monthlyGift)">
          -
        </div>
        <div v-else class="center">
          <AppAmount :amount="monthlyGift" :currency-type="activeCurrency" />
        </div>
      </template>
    </BaseTable>
  </div>
</template>

<style lang="scss" scoped>
.vip-day-salary{
    --tg-table-td-padding-x: 0;
    --tg-table-td-padding-y: 0;
    --tg-table-th-padding-x: 0;
    --bc-amount-currency-size: 1rem;
    --tg-app-amount-font-size: 0.75rem;
}
</style>
